<template>
	<div id="map">
		<mapbox 
			access-token="pk.eyJ1IjoieWFuZ3NmIiwiYSI6ImNqM2prMjE3dDAwbHUzM296YXFvenJyNXEifQ.qlTXSsI6b0-01Zv2CLo9QQ"
			:map-options="{
				style: 'mapbox://styles/mapbox/satellite-v9',
				center: [-96, 37.8],
				zoom: 3
			}"
			:geolocate-control="{
				show: true, 
				position: 'top-left'
			}"
			:scale-control="{
				show: true,
				position: 'top-left'
			}"
			:fullscreen-control="{
				show: true,
				position: 'top-left'
			}"
			@map-load="mapLoaded"
			@map-click="mapClicked">
		</mapbox>
	</div>
</template>

<script>
	import Vue from 'vue'
	import Mapbox from 'mapbox-gl-vue';
	
	export default {
		components: {
			'mapbox': Mapbox
		},
		created () {
			this.initMap()
		},
		methods: {
			initMap() {
				
			},
	        mapLoaded(map) {
	            map.addLayer({
	                'id': 'points',
	                'type': 'symbol',
	                'source': {
	                    'type': 'geojson',
	                    'data': {
	                        'type': 'FeatureCollection',
	                        'features': [{
	                            'type': 'Feature',
	                            'geometry': {
	                                'type': 'Point',
	                                'coordinates': [-77.03238901390978, 38.913188059745586]
	                            },
	                            'properties': {
	                                'title': 'Mapbox DC',
	                                'icon': 'monument'
	                            }
	                        }, {
	                            'type': 'Feature',
	                            'geometry': {
	                                'type': 'Point',
	                                'coordinates': [-122.414, 37.776]
	                            },
	                            'properties': {
	                                'title': 'Mapbox SF',
	                                'icon': 'harbor'
	                            }
	                        }]
	                    }
	                },
	                'layout': {
	                    'icon-image': '{icon}-15',
	                    'text-field': '{title}',
	                    'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
	                    'text-offset': [0, 0.6],
	                    'text-anchor': 'top'
	                }
	            });
	        },
	        mapClicked(map, e) {
	            this.addPopUp(map, e);
	        },
	        mapMouseMoved(map, e) {
	            const features = map.queryRenderedFeatures(e.point, {
	                layers: ['points']
	            });
	            map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
	        },
	        addPopUp(map, e) {
	            const features = map.queryRenderedFeatures(e.point, {
	                layers: ['points']
	            });
	            if (!features.length) {
	                return;
	            }
	
	            const feature = features[0];
	
	            const popupContent = Vue.extend({
	                template: '<button @click="popupClicked">Click Me!</button>',
	                methods: {
	                    popupClicked() {
	                        alert('Popup Clicked!');
	                    },
	                }
	            });
	
	            // Populate the popup and set its coordinates
	            // based on the feature found.
	            const popup = new mapboxgl.Popup()
	                .setLngLat(feature.geometry.coordinates)
	                .setHTML('<div id="vue-popup-content"></div>')
	                .addTo(map);
	
	            new popupContent().$mount('#vue-popup-content');
	        }
       }
	}
	
</script>

<style>
	#map {
		width: 100%;
		height: 100%;
	}
</style>